<template>
  <div class="admin_all">
    <admin_top></admin_top>
    <div style="padding: 30px;">
      <!-- <div class="t_btn_box">
        <div>
          <el-input style="width:180px" size="small" v-model="searchname" placeholder="接口渠道名称"></el-input>
          <el-button @click="getqdlist()" size="small" type="danger">搜索</el-button>
        </div>
      </div> -->
      <el-button @click="tidan" size="small" type="danger" style="margin: 20px 0;">添加</el-button>
      <div class="t_table_box">
        <el-table :data="tableData">
          <el-table-column prop="platform_name" label="网站名称">
          </el-table-column>
          <el-table-column prop="domain" label="域名">
          </el-table-column>
          <el-table-column prop="ip" label="IP">
          </el-table-column>
          <el-table-column prop="filing" label="备案">
          </el-table-column>
          <el-table-column label="客服">
            <template slot-scope="scope">
              <img :src="scope.row.customer">
            </template>
          </el-table-column>
          <el-table-column label="登录LOGO">
            <template slot-scope="scope">
              <img :src="scope.row.login_logo">
            </template>
          </el-table-column>
          <el-table-column label="网页LOGO">
            <template slot-scope="scope">
              <img :src="scope.row.web_logo">
            </template>
          </el-table-column>
          <!-- <el-table-column label="网页LOGO2">
            <template slot-scope="scope">
              <img :src="scope.row.web_logo2">
            </template>
          </el-table-column> -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="shanchu(scope.row)" size="small">删除</el-button>
              <el-button type="text" @click="xiugai(scope.row)" size="small">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>


    <el-dialog title="添加网站" :visible.sync="tidanlog" width="600px" :close-on-press-escape="false" :close-on-click-modal="false">
      <el-input v-model="all.platform_name" style="margin-bottom: 20px;" placeholder="请输入平台名字"></el-input>
      <el-input v-model="all.filing" style="margin-bottom: 20px;" placeholder="请输入备案信息"></el-input>
      <el-input v-model="all.domain" style="margin-bottom: 20px;" placeholder="请输入域名"></el-input>
      <el-input v-model="all.ip" style="margin-bottom: 20px;" placeholder="请输入IP地址"></el-input>
      <div class="kflexc" style="margin-bottom: 20px;" v-if="chongkai">
        <div style="width: 120px;">客服：</div>
        <chuantu ref="chuantu" @getimg="getimg" :imgs="all.customer"></chuantu>
      </div>
      <div class="kflexc" style="margin-bottom: 20px;" v-if="chongkai">
        <div style="width: 120px;">登陆页LOGO：</div>
        <chuantu ref="chuantu" @getimg="getimg2"  :imgs="all.login_logo"></chuantu>
      </div>
      <div class="kflexc" style="margin-bottom: 20px;" v-if="chongkai">
        <div style="width: 120px;">网站内LOGO：</div>
        <chuantu ref="chuantu" @getimg="getimg3"  :imgs="all.web_logo"></chuantu>
      </div>
      <!-- <div class="kflexc" style="margin-bottom: 20px;" v-if="chongkai">
        <div style="width: 120px;">网站内LOGO2：</div>
        <chuantu ref="chuantu" @getimg="getimg4" :imgs="all.web_logo2"></chuantu>
      </div> -->

      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="danger" @click="tidango">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
  import * as qiniu from 'qiniu-js'
  import admin_top from './top.vue';
  import axios from "axios";
  import chuantu from "../zujian/chuantu.vue";
  export default {
    components: {
      admin_top,
      chuantu
    },
    data() {
      return {
        tableData: [],
        //创建订单页面是否显示
        searchname: "",
        all: {

        },
        tidanlog: false,
        chongkai:false
      };
    },
    mounted() {

      //获取已对接渠道
      this.getqdlist()



    },
    destroyed() {

    },
    methods: {
      shanchu:function(item){
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post('/api/plan-market/admin/website/delete',{id:item.id})
            .then(response => {
              if (response.data.msg.code == 0) {
                this.$message.success('删除成功');
                this.getqdlist()
                this.tidanlog = false
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        })
      },
      xiugai:function(item){
        this.all = JSON.parse(JSON.stringify(item))
        this.tidanlog = true
        this.chongkai = false
        this.$nextTick(()=>{
          this.chongkai = true
        })

      },
      getimg: function(img) {
        this.all.customer = img
      },
      getimg2: function(img) {
        this.all.login_logo = img
      },
      getimg3: function(img) {
        this.all.web_logo = img
      },
      getimg4: function(img) {
        this.all.web_logo2 = img
      },
      tidan: function() {
        this.chongkai = false
        this.all = {}
        this.tidanlog = true

        this.$nextTick(()=>{
          this.chongkai = true
        })

      },
      tianjiaqiniu:function(){
        var that = this
        var Obj2str = function(o) {
            if (o == undefined) {
                return "";
            }
            var r = [];
            if (typeof o == "string") return "\"" + o.replace(/([\"\\])/g, "\\$1").replace(/(\n)/g, "\\n").replace(/(\r)/g, "\\r").replace(/(\t)/g, "\\t") + "\"";
            if (typeof o == "object") {
                if (!o.sort) {
                    for (var i in o)
                        r.push("\"" + i + "\":" + Obj2str(o[i]));
                    if (!!document.all && !/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test(o.toString)) {
                        r.push("toString:" + o.toString.toString());
                    }
                    r = "{" + r.join() + "}"
                } else {
                    for (var i = 0; i < o.length; i++)
                        r.push(Obj2str(o[i]));
                    r = "[" + r.join() + "]";
                }
                return r;
            }
            return o.toString().replace(/\"\:/g, '":""');
        }

        axios.post(`/api/system/qiniu/upload_token3`,{bucket:'gthshopstore',cloud:`taowa/${this.all.domain}.json`})
          .then(response => {
            if(response.data.msg.code == 0){
              const observer = {
                next(res){},
                error(err){},
                complete(res){
                  that.$message.success('成功存入七牛');
                  that.getqdlist()
                  that.tidanlog = false
                }
              }
              let files = Obj2str(JSON.stringify(this.all))
              let file = new File([files], `taowa/${this.all.domain}.json`, {type: 'application/json'});
              const observable = qiniu.upload(file, file.name, response.data.data, {}, {})
              const subscription = observable.subscribe(observer) // 上传开始
            }else{
              this.$message.error(response.data.msg.info);
            }
          });
      },
      tidango: function() {
        let url = `/api/plan-market/admin/website/add`
        if(this.all.id){
          url = `/api/plan-market/admin/website/edit`
        }
        axios.post(url,this.all)
         .then((response) => {
           this.tianjiaqiniu()
         })
      },

      //获取已对接渠道
      getqdlist() {
        axios.get('/api/plan-market/admin/website/list', {
            params: {
              page: 1,
              page_size:1000
            }
          })
          .then((response) => {
            this.tableData = response.data.data.data
          })
      }
    },
  }
</script>

<style lang="scss" scoped>
  .admin_all {
    background: #EAEAEA;
    min-height: 100vh;
    padding: 0px;
    img{ max-width: 100%;}
    .logo {
      height: 30px;
    }

    .el-input {
      // width: 180px;
      // margin-right: 10px;
    }

    .flex {
      display: flex;
    }



    .zu {
      margin-top: 20px;

      .tit {
        background: #ccc;
        line-height: 45px;
        padding-left: 20px;
      }

      .con {
        background: #FFFFFF;
        padding: 20px;
        line-height: 30px;
        font-size: 14px;
      }

      .lli {
        margin-right: 30px;
        color: #666;
      }
    }
  }
</style>
